<template>
  <div class="box">
    <div class="affter">
      <i class="el-icon-sunrise-1"></i>
      产品经纪
    </div>
    <div>
      <el-table :data="formDate" border style="width: 60%" :show-header="false" @row-click="$router.push('/dichanliebiao')">
        <el-table-column prop="image" label="图片" width="320">
          <template v-slot="{ row }">
            <img
            class="img"
              @click="click(row.id)"
              v-imgErr="require('@/assets/cat.webp')"
              :src="row.image"
              style="
                width: 200px;
                height: 200px;
                border-radius: 50%;
                object-fit: cover;
              "
            />
            <!-- < img :src="row.image" style="width:200px;height:200px;object-fit:cover;"> -->
          </template>
          <!-- <template v-slot{row}>
            <img
              v-imgErr="require('@/assets/cat.webp')"
              style="height: 200px; width: 200px; border-radius: 50%"
              class="img"
              :src="row.image"
              alt=""
            />
          </template> -->
        </el-table-column>
        <el-table-column prop="desc" label="介绍">
          <template v-slot="{ row }">
            <h2>{{ row.name }}</h2>
            <p>{{ row.desc }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="limit"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
          </el-row>
  </div>
</template>

<script>
import { Properties, getJingJitotal } from '@/api/fangchang'
export default {
  data () {
    return {
      formDate: [],
      limit: 2,
      start: 0,
      total: 0
    }
  },
  created () {
    this.Properties()
    this.getJingJitotal()
  },
  methods: {
    // 分页 页码发生改变时触发
    currentChange (val) {
      // console.log(val)
      this.start = (val - 1) * 2
      this.Properties()
    },
    // 获取经纪数量
    async getJingJitotal () {
      const res = await getJingJitotal()
      this.total = res.data
    },
    // 获取经纪列表
    async Properties () {
      const res = await Properties({
        _limit: this.limit,
        _start: this.start
      })
      console.log(111, res)
      this.formDate = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.affter {
  margin-left: 305px;
  color: orange;
  padding: 10px 0;
  font-size: 20px;
}
.el-table {
  margin: 0 auto;
}
.img {
  margin-left: 50px;
}
.box{
  height: 600px;
}
</style>
